// 求购中心
<template>
  <div class="container">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1200">
      <div class="parentPage" v-show="!this.$store.state.sonPage">
        <div class="banner">
          <img src="@/assets/images/2019pic02.jpg" alt>
          <el-button type="primary" size="small" @click="Release">
            发布求购
            <span class="el-icon-back"></span>
          </el-button>
        </div>
        <div class="wantBuyCenter">
          <buy-center :content="content" :currentPage="currentPage">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="6"
              :total="pageNum"
              :current-page="1"
              @prev-click="prevClick"
              @next-click="nextClick"
              @current-change="currentChange($event)"
              v-loading.fullscreen.lock="fullscreenLoading"
            ></el-pagination>
          </buy-center>
          <selectionof-goods></selectionof-goods>
        </div>
      </div>

      <div class="sonPage" v-show="this.$store.state.sonPage">
        <p class="title">
          <router-link to="/" tag="i" style="cursor: pointer;">首页</router-link>
           > 发布求购
          </p>
        <p class="careful">
          <span>*</span>
          发布求购信息，您需填写所需要询价的产品信息及您的联系方式，然后点击“立即提交”按钮，我们的销售代表会第一时间竭诚为您服务！
        </p>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="产品品牌" width="220">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.brand_name"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="产品名称" width="220">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.goods_name"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="产品规格" width="180">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.specification"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="数量" width="80">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.goods_number"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="最低单价要求（元）" width="180">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.lowest_price"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="截止日期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                size="mini"
                placeholder="选择日期"
              ></el-date-picker>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-input type="textarea" v-model="buying_desc" placeholder="请补充此次需要补充的询价信息（限100个字符）"></el-input>

        <div class="addGoods">
          <el-button type="primary" @click="addGoods" size="mini">+ 继续添加商品</el-button>
        </div>

        <div class="Submission">
          <el-button type="warning" @click="Submission" :loading="loading" :disabled="disabled">
            <b>立即提交</b>
          </el-button>
        </div>
      </div>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import buyCenter from "./components/BuyCenter"; //  信息发布页面
import selectionofGoods from "../productDetails/components/Selectionofgoods"; //  精选商品

export default {
  name: "purchaseCenter",

  data() {
    return {
      disabled: true,
      loading: false,
      pageNum: 1, // 总页数
      currentPage: "", // 当前页面的页码
      fullscreenLoading: false, // 加载图标
      content: [], // 分页的展示内容区域
      navindex: 4,
      // sonPage : this.$store.state.sonPage,
      tableData: [
        {
          // brand_name:'',//品牌名称
          // goods_name:'',//产品名称
          // goods_number:'',//数量   int
          // lowest_price:'',//最低价格 float
          // specification:'',//产品规格
          // end_time:''// 截止日期
          brand_name: "",
          goods_name: "",
          specification: "",
          goods_number: "",
          lowest_price: "",
          end_time: ""
          // id : 0
        }
      ],
      buying_desc: "" // 商品描述
    };
  },

  methods: {
    // 发布求购的按钮点击事件
    Release() {
      this.$store.commit("sonPage", true);
    },
    // 初始化页面的显示页面
    initpageShow() {
      console.log(this.$route.params.sonshow);  // 判断网站导航点击进来的显示页面
      if (this.$route.params.sonshow == 1) {
        this.$store.commit("sonPage", false);
      } else if (this.$route.params.sonshow == 0) {
        // this.sonPage = false
        this.$store.commit("sonPage", true);
      }
    },

    prevClick() {
      console.log("上一页");
    },

    nextClick() {
      console.log("下一页 ");
    },

    async currentChange(ev) {
      // this.fullscreenLoading = true  // 页面加载图标
      if (ev == 1) {
        let info = await this.$http({
          method: "post",
          url: `/api/index/web/getBuyingList`,
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            page: ev
          }
        });
        let _myInfo = info.data.data;
        _myInfo.forEach((element, index) => {
          console.log(element, index);
        });

        this.content = _myInfo;
        // this.fullscreenLoading = false  // 页面加载图标
        this.currentPage = ev;
      } else {
        // console.log(ev)         // ev 是点击的当前页码
        let info = await this.$http({
          method: "post",
          url: `/api/index/web/getBuyingList`,
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            page: ev
          }
        });
        console.log(info);
        this.content = info.data.data;
        this.fullscreenLoading = false; // 页面加载图标
        this.currentPage = ev;
      }

      // this.scrollinit();
    },

    // 表单
    handleDelete(index, row) {
      console.log(index);
      if (index > 0) {
        this.tableData.splice(index, 1);
      } else {
        this.$notify({
          title: "警告",
          message: "已经是最后一条了...",
          type: "warning"
        });
      }
    },

    // 添加商品
    addGoods() {
      let obj = {
        brand_name: "",
        goods_name: "",
        specification: "",
        goods_number: "",
        lowest_price: "",
        end_time: ""
        // pickerOptions : '',
        // id :this.tableData.length
      };
      this.tableData.push(obj);
    },

    // blur() {
    //     this.tableData = this.tableData
    // },

    // 分页
    async dataInfo() {
      let info = await this.$http({
        method: "post",
        url: `/api/index/web/getBuyingList`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          page: 1
        }
      });

      // console.log(info.data['page_num'])
      this.content = info.data.data;
      this.pageNum = info.data["page_num"];
    },

    // 提交
    async Submission() {
      this.loading = true
      const buying_desc = this.buying_desc; // 描述
      const user_id = this.$store.state.UserInfor.user_id;
      //    未标注 为string类型  标注为特殊的类型
      const myForm = this.tableData;
      console.log(myForm);
      console.log(myForm);
      let info = await this.$http({
        method: "post",
        url: `/api/index/web/buying`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          buying_desc,
          user_id,
          myForm
        }
      });

      if (info.data.State.Code == 200) {
        this.$notify({
          title: '提交成功 请耐心等待审核人员审核...',
          type: 'success'
        })
        this.loading = false
        // this.$message({
        //   message: "恭喜你 提交成功 3秒后自动返回到 求购中心",
        //   type: "success"
        // });
        // let timer = setTimeout(() => {
        //   this.$store.commit("sonPage", false);
        // }, 3000);
      }
    }
  },
  watch: {
    tableData: {
      handler: function (newValue, oldValue) {
        console.log(newValue)
        if (newValue[0].brand_name && newValue[0].goods_name && newValue[0].specification && newValue[0].goods_number && newValue[0].lowest_price && newValue[0].end_time) {
          this.disabled = false
        }
      },
      deep: true,
    }
  },

  components: {
    selectionofGoods,
    buyCenter
  },

  mounted() {
    this.initpageShow();
    this.dataInfo(); // 分页数据
  }
};
</script>
<style lang="scss" scoped>
.container {
  .w1200 {
    width: 1200px;
    margin: auto;
    .parentPage {
      .banner {
        width: 1200px;
        position: relative;
        img {
          width: 1200px;
          height: 290px;
        }
        .el-button {
          position: absolute;
          left: 62px;
          bottom: 55px;
          letter-spacing: 1px;
          span {
            transform: rotateY(180deg);
          }
        }
        .el-button--small {
          border-radius: 0px;
          font-size: 14px;
        }
      }
      .wantBuyCenter {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 30px;
      }
      .el-pagination {
        text-align: center;
        margin-top: 20px;
      }
    }
    .sonPage {
      .title {
        padding: 0 10px;
        font-size: 14px;
        color: #3a3a3a;
        line-height: 14px;
        margin-top: 25px;
        border-left: 3px solid #a2a2a2;
      }
      .careful {
        line-height: 40px;
        margin-top: 25px;
        border-top: 1px solid #eaeaea;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: #626262;
        span {
          color: #ff0000;
        }
      }
      /deep/ .el-table__header {
        .cell {
          text-align: center;
        }
      }
      /deep/ .el-botton[type="primary"] {
        margin-top: 20px;
      }
      .addGoods {
        margin-top: 30px;
        text-align: right;
      }
      .Submission {
        margin-top: 30px;
        text-align: center;
        /deep/ .el-button {
          letter-spacing: 3px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>


